<!-- 侧边栏 -->
<script setup>
import { inject } from 'vue'
// 导入图像资源
import homeIcon from '../assets/home.svg'
import homeSelectIcon from '../assets/home_select.svg'
import appstoreIcon from '../assets/appstore.svg'
import appstoreSelectIcon from '../assets/appstore_select.svg'
import cloudUploadIcon from '../assets/cloud upload.svg'
import cloudUploadSelectIcon from '../assets/cloud upload_select.svg'

// 从App.vue注入当前页面索引和切换函数
const selectedIndex = inject('currentPageIndex')
const setCurrentPage = inject('setCurrentPage')

// 按钮点击处理函数
const handleButtonClick = (index) => {
  setCurrentPage(index)
}
</script>
<template>
    <div class="container">
        <div 
            class="slider_btn" 
            :class="{ active: selectedIndex === 0 }"
            @click="handleButtonClick(0)"
        >
            <img :src="selectedIndex === 0 ? homeSelectIcon : homeIcon" alt="首页">
        </div>
        <div 
            class="slider_btn" 
            :class="{ active: selectedIndex === 1 }"
            @click="handleButtonClick(1)"
        >
            <img :src="selectedIndex === 1 ? appstoreSelectIcon : appstoreIcon" alt="应用商店">
        </div>
        <div 
            class="slider_btn" 
            :class="{ active: selectedIndex === 2 }"
            @click="handleButtonClick(2)"
        >
            <img :src="selectedIndex === 2 ? cloudUploadSelectIcon : cloudUploadIcon" alt="云上传">
        </div>
    </div>
</template>
<style scoped>
.container {
    position: absolute;
    width: 80px;
    height: 96vh;
    margin-top: 1vh;
    margin-left: 1vw;
    border-radius: 12px;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden; /* 隐藏横向和纵向滚动条 */
    overflow-x: hidden; /* 强制隐藏横向滚动条 */
    overflow-y: hidden; /* 强制隐藏纵向滚动条 */
    /* 隐藏滚动条样式 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE和Edge */
    flex-direction: column;
}

.container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
    width: 0;
    height: 0;
}

/* 确保容器内所有元素也隐藏滚动条 */
.container * {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE和Edge */
}

.container *::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
    width: 0;
    height: 0;
}

/*左侧导航栏按钮*/
.slider_btn{
    width: 40px;
    height: 40px;
    background-color: #f5f5f5;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

/* 按钮悬停效果 */
.slider_btn:hover {
    background-color: #e8e8e8;
    transform: scale(1.05);
}

/* 按钮选中状态 */
.slider_btn.active {
    background-color: #007AFF;
    border: 2px solid #005BB5;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
    transform: scale(1.1);
}

/* 选中状态悬停效果 */
.slider_btn.active:hover {
    background-color: #005BB5;
    transform: scale(1.1);
}

.slider_btn>img{
    width: 22px;
    height: 22px;
    transition: all 0.3s ease;
}

/* 选中状态下图标的效果 */
.slider_btn.active > img {
    filter: brightness(0) invert(1); /* 将图标变为白色 */
}
</style>

